xlv.obj.dock={
	extend:function(){
	},
	implement:function(){
	},
	create:function(tag){
		var div=document.createElement((tag||'div'));
		div.setAttribute('xlvobject','xlv.obj.dock');
		Element.addClassName(div,'class_dock');
		return div;
	},
	properties:{
		autoHidden:true,
		range:2
	},
	method:{
		construct:function(){
			var v=this.$V;
			Element.addClassName(this,'class_dock');
			v.tipElement=xlv.util.findDirectChild(this,{id:'xlvid_dock_tip'});
			if(!v.tipElement){
				this.appendChild(v.tipElement=document.createElement('div'));
				v.tipElement.setAttribute('id','xlvid_dock_tip');
			}
			Element.setStyle(this,{zIndex:xlv.sys.zIndexDock});
			this.styleFor(this);
			this.styleForTip(v.tipElement);
		},
		initial:function(){
			this.addEventHandler('mouseout', '_mouseout');
			this.addEventHandler('mousemove', '_mousemove');
			this.$V.visible=true;
			this.$V.effecting=false;
			this.layout();
			if(this.$P.autoHidden)this.$V._timeout=setTimeout((function(){this._show(false);}).bind(this), 5000);
		},
		styleFor:function(dock){
		},
		styleForTip:function(tip){
		},
		layout:function(){
			var dim=Element.getDimensions(this);
			this.$V.maximumSize=dim.height;
			this.$V.minimumSize=parseInt(Element.getStyle(this,'minHeight'));
			this.$V.iconSizes=[];
			xlv.util.children(this,{tag:'img'},false).each(function(img){this._layoutIcon(img);}.bind(this));
			this.$V.maximumWidth=0;
			this.$V.scale=0;
			this.$V.closeTimeout=null;
			this.$V.closeInterval=null;
			this.$V.openInterval=null;
		},
		_layoutIcon:function(icon_frame){
			var style={left:'0px',top:'0px',position:'relative',padding:'0px 2px 0px 2px'};
			style.width=this.$V.minimumSize+'px';
			style.height=this.$V.minimumSize+'px';
			style.margin=(this.$V.maximumSize-this.$V.minimumSize)+'px'+' -2px 0px -2px';
			Element.setStyle(icon_frame,style);
			this.$V.iconSizes.push(this.$V.minimumSize);
		},
		_show:function(visible){
			var element=this;
			var options={element:this,minPx:2};
			if(visible){
				this.$V.effecting=true;
				options.style={bottom:'0px'};
				options.finished=(function(){this.$V.effecting=false;}).bind(this);
				xlv.util.styleEffect(options);
				this.$V.visible=true;
			}else{
				this.$V.effecting=true;
				this.$V.visible=false;
				options.style={bottom:'-32px'};
				options.finished=(function(){this.style.bottom='-60px';this.$V.effecting=false;}).bind(this);
				xlv.util.styleEffect(options);
			}
		},
		getAvailableLocation:function(){
			this.style.bottom='0px';
			this.$V.visible=true;
			var imgs=xlv.util.children(this,{tag:'img'},false);
			if(imgs.length==0)	return [this.$V.minimumSize, 0];
			var img=imgs[imgs.length-1];
			var loc=Element.viewportOffset(img);
			var scroll=Element.cumulativeScrollOffset(img);
			loc[0]+=scroll[0]*2;
			loc[1]+=scroll[1]*2;
			loc[0]+=this.$V.minimumSize;
			return loc;
		},
		createIconFrameObject:function(properties,method){
			var loc=this.getAvailableLocation();
			var icon_frame=xlv.sys.newInstance(xlv.desktop,'iconFrame',properties,method);
			Element.setStyle(icon_frame,{position:'absolute',zIndex:xlv.sys.zIndexEffect, left:loc[0]+'px',top:loc[1]+'px',width:this.$V.minimumSize+'px',height:this.$V.minimumSize+'px'});
			return icon_frame;
		},
		addIconFrameObject:function(icon_frame){
			this._layoutIcon(icon_frame);
			this.appendChild(icon_frame);
		},
		removeIconFrameObject:function(frame){
			var imgs=xlv.util.children(this,{tag:'img'},false);
			for(var i=0,n=imgs.length;i<n;++i){
				if(imgs[i].$P && imgs[i].$P._frameInstance==frame){
					var loc=Element.viewportOffset(imgs[i]);
					var scroll=Element.cumulativeScrollOffset(imgs[i]);
					loc[0]+=scroll[0]*2;
					loc[1]+=scroll[1]*2;
					var style={position:'absolute',zIndex:xlv.sys.zIndexEffect, left:loc[0]+'px',top:loc[1]+'px',width:this.$V.minimumSize+'px',height:this.$V.minimumSize+'px',margin:'0px'};
					this.removeChild(imgs[i]);
					Element.setStyle(imgs[i],style);
					this._mouseout();
					return imgs[i];
				}
			}
			return null;
		},
		dispose:function(){
		},
		_updateIcons:function(){
			var v=this.$V;
			var imgs=xlv.util.children(this,{tag:'img'},false);
			if(v.scale==1 && v.tipElement) v.tipElement.style.display='block';
			if(v.scale==0 && v.tipElement) v.tipElement.style.display='none';
			for(var i=0,n=imgs.length;i<n;++i){
				var size=v.minimumSize+v.scale*(v.iconSizes[i]-v.minimumSize);
				if(size==v.maximumSize)	this._updateTip(imgs[i]);
				var style={width:size+'px',height:size+'px',padding:'0px 2px 0px 2px'};
				style.margin=(v.maximumSize-size)+'px'+' -2px 0px -2px';
				Element.setStyle(imgs[i],style);			
			}
		},
		_updateTip:function(img){
			var tip=this.$V.tipElement;
			if(tip){
				var l=img.offsetLeft;
				var w=img.offsetWidth;
				var tip_w=tip.offsetWidth;
				l=l+(w-tip_w)/2;
				Element.setStyle(tip,{left:l+'px'});
				var text='untitle';
				if(img.getTitle)text=img.getTitle();
				xlv.util.setElementValue(tip,text);
			}
		},
		_mousemove:function(event){
			if(this.$V.effecting) return;
			if(this.$V._timeout){clearTimeout(this.$V._timeout);this.$V._timeout=null;}
			if(this.$P.autoHidden && !this.$V.visible) {this._show(true); return;}
			var target=event.target;
			if(target==this) return;
			var v=this.$V;
	    	if(v.closeTimeout) window.clearTimeout(v.closeTimeout);
    		v.closeTimeout=null;
    		if(v.closeInterval)window.clearInterval(v.closeInterval);
    		v.closeInterval = null;
		    if(v.scale!=1 && !v.openInterval){
		    	v.openInterval=window.setInterval(
          			function(){
          				var v=this.$V;
            			if(v.scale<1) v.scale += 0.125;
            			if(v.scale>=1){
              				v.scale=1;
              				window.clearInterval(v.openInterval);
              				v.openInterval = null;
            			}
            			this._updateIcons();
            		}.bind(this),10);
    		}
		    var range=this.$P.range;
		    var index=-1;
		    var imgs=xlv.util.children(this,{tag:'img'},false);
		    for(var i=0,n=imgs.length;i<n;++i) if(imgs[i]==target)index=i;
		    var across=false;
		    if(index>=0)across=(event.layerX || event.offsetX)/v.iconSizes[index];
		    if(across){
				var currentWidth=0;
			    for(var i=0,n=imgs.length;i<n;++i){
		        	if(i<index-range||i>index+range){
						v.iconSizes[i]=v.minimumSize;
					}else if(i==index){
						v.iconSizes[i]=v.maximumSize;
			        }else if(i<index){
						v.iconSizes[i]=v.minimumSize+Math.round(
                  			(v.maximumSize-v.minimumSize-1)*
                  			(Math.cos((i-index-across+1)/range*Math.PI)+1)/2);
				        currentWidth+=v.iconSizes[i];
					}else{
						v.iconSizes[i]=v.minimumSize+Math.round(
                  			(v.maximumSize-v.minimumSize-1)*
                  			(Math.cos((i-index-across)/range*Math.PI)+1)/2);
						currentWidth+=v.iconSizes[i];
		        	}
      			}
				if(currentWidth>v.maximumWidth)v.maximumWidth=currentWidth;
				if(index>=range && index<imgs.length-range && currentWidth<v.maximumWidth){
					v.iconSizes[index-range] += Math.floor((v.maximumWidth - currentWidth) / 2);
        			v.iconSizes[index+range] += Math.ceil((v.maximumWidth - currentWidth) / 2);
				}
      			this._updateIcons();
		    }
		},
		_mouseout:function(event){
			if(this.$V.effecting) return;
			if(event && this.$P.autoHidden && this.$V.visible){
				var to=(event.toElement||event.relatedTarget);
				if((to && !xlv.util.isDescendantOf(to,this)))this._show(false);
			}
			if(event&&event.target==this)return;
			var v=this.$V;
    		if(!v.closeTimeout && !v.closeInterval){
				v.closeTimeout=window.setTimeout(
          			function(){
          				var v=this.$V;
            			v.closeTimeout=null;
            			if(v.openInterval){
              				window.clearInterval(v.openInterval);
              				v.openInterval=null;
            			}
            			v.closeInterval=window.setInterval(
                			function(){
                				var v=this.$V;
                  				if(v.scale>0) v.scale -= 0.125;
                  				if(v.scale<=0){
                    				v.scale=0;
                    				window.clearInterval(v.closeInterval);
                    				v.closeInterval=null;
                  				}
                     			this._updateIcons();
                			}.bind(this)
                		,10);
          			}.bind(this)
          		,100);
    		}
		}
	}
};
